<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const active = ref(0)

const navItems = [
  { name: '首页', icon: 'home-o', path: '/' },
  { name: '关于', icon: 'info-o', path: '/about' },
  { name: '我的', icon: 'user-o', path: '/profile' }
]

const onNavChange = (index) => {
  active.value = index
  router.push(navItems[index].path)
}
</script>

<template>
  <van-tabbar v-model="active" @change="onNavChange" fixed route>
    <van-tabbar-item v-for="(item, index) in navItems" :key="index" :icon="item.icon">
      {{ item.name }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped>
.van-tabbar {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style> 